<template>
    <div>
        <div class="animal_content">
            <div class="contents">
                <div class="animal_list">
                <p class="title">求包养</p>
                <el-tooltip class="item" effect="dark" v-for="(item,index) in animalList" :key="index" :content="item.title" placement="right-start">
                    <el-image
                    class="img-item"
                    :alt="item.title"
                    :src="item.url"
                    @click="handleTo(item)"
                    fit="cover"></el-image>
                </el-tooltip>
            </div>
            <div class="workers">
                <el-card>
                    <div class="userinfo">
                        <p v-if="userinfo">我的资料</p>
                        <span class="spt" v-if="userinfo">姓名：{{userinfo.workerName}}</span>
                        <span class="spt" v-if="userinfo">类别：{{userinfo.type}}</span>
                        <el-button type="text" v-if="userinfo&&userinfo.type=='社会人员'" @click="toApplys">申请成为志愿者</el-button>
                        <el-button v-if="!isLogin" type="success" plain style="width:140px" @click="toLogin" icon="el-icon-success" size="mini">立即登录</el-button>
                        <el-button v-if="isLogin" type="danger" plain style="width:140px" @click="toLoginout" icon="el-icon-error" size="mini">退出</el-button>
                    </div>
                </el-card>
                <p class="title">工作人员一览</p>
                <el-card class="img-item"
                :key="index"
                v-for="(item,index) in workerList">
                    <el-image
                :alt="item.workerName"
                :src="item.imageUrl"
                @click="handleToWorker(item)"
                fit="cover"></el-image>
                <span style="display:inline-block;width:100%;text-align:center;">{{item.workerName}}</span>
                </el-card>
            </div>
            </div>
        </div>
        <div class="notice">
            <div class="notice_content">
                <p class="top_title">交流区（周报）</p>
                <div class="notice_item" style="font-weight:700">
                    <span class="title">话题</span>
                    <span class="author">作者</span>
                    <span class="num">回应</span>
                    <span class="time">更新时间</span>
                </div>
                <div class="notice_item" v-for="(it,inx) in notice" :key="inx+1" @click="handleClick(it)">
                    <span class="title">{{it.title}}</span>
                    <span class="author">来自：{{it.auth}}</span>
                    <span class="num">{{it.num}}</span>
                    <span class="time">{{it.datetime}}</span>
                </div>
            </div>
        </div>
        <div class="home-friends">
            <div class="friends-container">
                <h1>合作伙伴</h1>
                <ul>
                    <li v-for="item in 6" :key="item">
                        <img :src="`../../../static/img/friends/clients-logo0${item}.png`">
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import { toApply,getNotice,getworkerList,getWeekList,anectodteNum} from '../../api';

export default {
    name: "Home",
    data(){
        return {
            userinfo: {},
            isLogin:false,
            animalList:[
                {id:1,title:'小毛',url:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=295536446,3788772626&fm=26&gp=0.jpg',age:10,address:'北京',detail:'测试'},
                {id:2,title:'小毛',url:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1343857318,3824070025&fm=26&gp=0.jpg',age:10,address:'北京',detail:'测试'},
                {id:3,title:'小毛',url:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3089326285,341092406&fm=26&gp=0.jpg',age:10,address:'北京',detail:'测试'},
                {id:4,title:'小毛',url:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=295536446,3788772626&fm=26&gp=0.jpg',age:10,address:'北京',detail:'测试'},
                {id:5,title:'小毛',url:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2583549809,423220941&fm=26&gp=0.jpg',age:10,address:'北京',detail:'测试'},
                {id:6,title:'小毛',url:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3727232993,2051056854&fm=26&gp=0.jpg',age:10,address:'北京',detail:'测试'},
                {id:7,title:'小毛',url:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1502491665,345241168&fm=26&gp=0.jpg',age:10,address:'北京',detail:'测试'},
                {id:8,title:'小毛',url:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2521818990,1505385380&fm=11&gp=0.jpg',age:10,address:'北京',detail:'测试'},
                {id:9,title:'小毛',url:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2805827423,1797093898&fm=26&gp=0.jpg',age:10,address:'北京',detail:'测试'},
                {id:10,title:'小毛',url:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=295536446,3788772626&fm=26&gp=0.jpg',age:10,address:'北京',detail:'测试'},
                {id:11,title:'小毛',url:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2004266156,4138797658&fm=26&gp=0.jpg',age:10,address:'北京',detail:'测试'},
            ],
            workerList:[],
            notice:[]
        }
    },
    created(){
        this.$emit('headFix', ['fixed',false]);
        const users=JSON.parse(localStorage.getItem('userinfo'))
        this.userinfo=users
        this.isLogin=users?true:false
        getNotice(1).then(res=>{
            if(res.code==200&&res.data){
                this.animalList.forEach((it,inx)=>{
                    it.id=res.data[inx].id
                    it.title=res.data[inx].nickName
                    it.isAdopt=res.data[inx].isAdopt
                })
            }
        }),
        
        getWeekList(1).then(res=>{
            if(res.code==200&&res.data){
                this.notice=res.data
            }
        })
        getworkerList(1).then(res=>{
            if(res.code==200&&res.data){
                res.data.forEach((it,inx)=>{
                    it.imageUrl='https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=300091246,3294280627&fm=26&gp=0.jpg'
                })
                this.workerList=res.data
            }
        })

    },
    methods:{
        handleClick(row){
            anectodteNum(row.id).then(res=>{
                this.$message.success('谢谢关注，暂未开放！')
                return false
            })
        },
        loadAnimate(index){
            this.slider_index = index;
        },
        handleTo(item){
           this.$router.push({path:'/animal',query:{
                    data:JSON.stringify(item)
                }})
        },
        handleToWorker(item){
            const userinfo = JSON.parse(localStorage.getItem('userinfo'))
            if(userinfo){
                this.$router.push({path:'/worker',query:{
                    data:item.id
                }})
            }else{
                this.$message.error('请先登录！')
                return false
            }
        },
        toLogin(){
            this.$router.push('/login')
        },
        toLoginout(){
            this.$confirm('确认退出么?', '提示', {
          confirmButtonText: '狠心离开',
          cancelButtonText: '再留恋一下咯',
          type: 'warning'
        }).then(() => {
            localStorage.clear()
            this.userinfo={}
            this.isLogin=false
          this.$message({
            type: 'success',
            message: '退出成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
            
        },
        toApplys(){
            this.$confirm('确认申请么?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '不了',
          type: 'warning'
        }).then(() => {
            toApply({id:this.userinfo.id}).then(res=>{
                if(res.code==200){
                    this.$message({
                      type: 'success',
                      message: '提交申请完成!'
                    });
                }
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
        }
    }
}
</script>
<style lang="scss" scoped>
    @mixin self_icon {
        &::before {
            border-left: 50px solid #DADADA;
            border-right: 50px solid #DADADA;
            bottom: 0;
            content: "";
            height: 1px;
            margin-left: -70px;
            position: absolute;
        }
        &::after {
            background: #FF8724 none repeat scroll 0 0 padding-box content-box;
            border-bottom: 1px solid #DADADA;
            border-left: 1px solid #DADADA;
            bottom: -10px;
            content: "";
            left: 50%;
            margin-left: -16px;
            padding: 0 0 8px 8px;
            position: absolute;
            transform: rotate(-45deg);
        }
    }
    figure {
        color: #ffffff;
        text-align: left;
        &::before {
            background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
            content: "";
            height: 100%;
            position: absolute;
            width: 100%;
        }
        figcaption {
            bottom: 0;
            left: 6%;
            margin: 0 auto;
            position: absolute;
            right: 6%;
            top: 40%;
            width: 1170px;
            padding: 0 15px;
            h1 {
                font-size: 46px;
            }
            p {
                font-size: 18px;
                font-weight: 400;
            }
            .slider-button {
                background-color: #FE8724;
                border-color: #FE8724;
                color: #ffffff;
                width: 180px;
                height: 40px;
                font-size: 18px;
                transition: transform 2s;
                &:hover {
                    transform: translateY(10px);
                }
            }
        }
    }
    .home-kind {
        box-sizing: border-box;
        background-color: #EBEEF5;
        padding: 0 5%;
        display: flex;
        li {
            padding: 1%;
            text-align: left;
            position: relative;
            box-sizing: border-box;
            width: 25%;
            h3{
                display: inline-block;
                div {
                    margin-top: 1%;
                    height: 2px;
                    width: 40px;
                    background-color: #0984E3;
                }
            }
            p {
                margin-top: 1.5%;
                font-size: 14px;
                color: gray;
            }
            h3>div {
                transition: width .5s;
            }
            &:hover {
                background-color: #ffffff;
                transition: background-color .5s;
                h3>div{
                    width: 100%;
                }
            }
            &:not(:first-child)::before {
                content: '';
                position: absolute;
                width: 1px;
                height: 80%;
                left: 0;
                background-color: #D6D6D6;
            }
            
        }
    }
    .home-service {
        margin-top: 3%;
        h1 {
            position: relative;
            @include self_icon;
            &::before {
                left: 49.9%;
                top: 174%;
                width: 43px;
            }
            &::after {
                height: 22px;
                left: 50%;
                top: 140%;
                width: 22px;
            }
        }
        &>p {
            margin-top: 5%;
            color: gray;
        }
        ul {
            margin-top: 5%;
            padding: 0 10%;
            display: grid;
            grid-template-columns: repeat(3,33.33333%);
            li {
                .service-box {
                    margin-left: 50%;
                    transform: translateX(-50%);
                    display: flex;
                    overflow: hidden;
                    width: 200px;
                    height: 200px;
                    border-radius: 50%;
                    img, .service-info {
                        transition: all 0.4s ease-in-out 0s;
                    }
                    &:hover {
                        img, .service-info {
                            transform: translateX(-80%);
                        }
                    }
                    img {
                        width: 100%;
                        height: auto;
                    }
                    .service-info {
                        width: 80%;
                        height: 100%;
                        background: #f1f1f1;
                        padding: 20% 25% 0 5%;
                        position: absolute;
                        top: 0;
                        right: -110%;
                        p {
                            font-weight: 600;
                        }
                    }
                }
            }
        }
    }
    .home-friends {
        margin-top: 5%;
        height: 300px;
        padding: 20px 0;
        background: url(../../../static/img/head-view/clients-bg.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        &::before {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            content: "";
            left: 0;
            top: 0;
        }
        .friends-container {
            padding-right: 15px;
            padding-left: 15px;
            position: relative;
            h1 {
                font-size: 45px;
                color: #ffffff;
                @include self_icon;
                &::before {
                    left: 50%;
                    top: 144%;
                    width: 29.5px;
                }
                &::after {
                    height: 12px;
                    left: 50%;
                    top: 130.5%;
                    width: 12px;
                }
            }
            ul {
                display: flex;
                margin-top: 5%;
                position: absolute;
                margin-left: 50%;
                transform: translateX(-50%);
            }
        }
    }
// 动画类
.bounceInDown {
    animation: bounceInDown 1s linear;
}
.fadeInUp {
    animation: fadeInUp 1s linear;
}
.animal_content{
    width: 100%;
    .contents{
        width: 1000px;
        margin: 0 auto;
        display: flex;
    }
}
.animal_list{
    text-align: left;
    width: 680px;
    margin: 10px 10px 10px 0px;
    box-sizing: border-box;
    .title{
        line-height: 60px;
        font-weight: 700;
        color: #FE8724;
        font-size: 16px;
    }
    .img-item{
        &:hover{
            cursor: pointer;
        }
        border-radius: 10px;
        overflow: hidden;
        margin-right: 10px;
        margin-bottom: 15px;
        width: 160px;
        height: 160px;
        box-sizing: border-box;
    }
}
.workers{
    text-align: left;
    width: 300px;
    margin: 10px 0px 10px 10px;
    box-sizing: border-box;
    .userinfo{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        .spt{
            width: 100%;
            text-align: left;
        }
    }
    .title{
        line-height: 60px;
        font-weight: 700;
        color: #FE8724;
        font-size: 16px;
    }
    .img-item{
        &:hover{
            cursor: pointer;
        }
        float: left;
        border-radius: 10px;
        overflow: hidden;
        margin-right: 10px;
        margin-bottom: 20px;
        width: 90px;
        height: 120px;
        box-sizing: border-box;
    }
}
.notice{
    width: 100%;
    .notice_content{
        width: 1000px;
        text-align: left;
        margin: 0 auto;
        .top_title{
            line-height: 60px;
            font-weight: 700;
            color: #FE8724;
            font-size: 16px;
        }
        .notice_item{
            width: 100%;
            display: flex;
            border-bottom: 1px dashed #FE8724;
            line-height: 40px;
            font-size: 14px;
            height: 40px;
            cursor: pointer;
            &:hover{
                color: darkcyan;
            }
            .title{
                width: 300px;
                overflow: hidden;
                text-overflow:ellipsis; 
                white-space: nowrap;
            }
            .author{
                width: 220px;
                overflow: hidden;
                text-overflow:ellipsis; 
                white-space: nowrap;
            }
            .num{
                width: 200px;
            }
            .time{
                flex: 1;
                text-align: right;
            }
        }
    }
}
</style>
